<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模型model</title>
    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h2>双向绑定</h2>
姓名：<input ng-model="name" ng-init="name=张">{{name}}<br/>
年龄：<input ng-model="age" ng-init="age=4">{{age}}
<h2>验证用户输入</h2>
<form name="myform">
    邮箱：<input type="email" name="myemail" ng-model="text">
    <span ng-show="myform.myemail.$error.email">{{text}}不是一个合法的邮箱</span>
</form>
<h2>应用状态</h2>
<form name="myform2">
    邮箱：<input type="email" name="myemail2" ng-model="text2" required>
    状态：valid:{{myform2.myemail2.$valid}}、error:{{myform2.myemail2.$error}}、dirty：{{myform2.myemail2.$dirty}}、touched:{{myform2.myemail2.$touched}}
</form>
<h2>CSS样式</h2>
<form name="myform3">
    <input type="email" name="myemail3" ng-model="text3" required>
</form>
<style>
    input.ng-invalid {
        background-color: lightblue;
    }
    input.ng-empty {
        border-color: #FF0000;
    }
    input.ng-not-empty {
        border-color: #FF00FF;
    }
</style>
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.name = "John Doe";
        $scope.age = "11";
    });
</script>
</html>